Property Description

This section describes properties of the canvas, block and grid layout to offer better understanding during designing.

• Canvas property

• Adapt To The Content: Canvas size adjusts according to content and element size.
• Fixed Width And Height: Select it and set the width and height of the canvas. Unit can be percentage or pixel.
• Number of Columns: Set the number of columns on the canvas. Click to add or delete columns.
  info

  Select units of columns from Proportion and Pixel, the supOS platform arranges the width of each column based on units and number of columns.

• Canvas interact
  Select Interact next to canvas property, and then set its interact events. For details, see Interact in Page Description.
• Block property

Parameter	Description
Number of Columns	Enter the number of columns inside the block. You can select different units of each column.
Default Position	The block is at the upper-left corner of the column and adapts to screen resolution.
Absolute Position	The block takes up a whole column without setting specific width and height. With set width and height smaller than the column, you can select the block from Level list, point to it and click to move it anywhere inside the column.
Fixed Width And Height	Set block size and when content is larger than the size, scroll bars are displayed.
Fit Window	Block size is the same as the left area of its parent block.
Adapt To The Content	Block size adjusts according to content and element size. You need to set the width and height of elements inside the block.
Display Level	Set the display level of the block. The higher the level, the more front it is displayed.
Background Color	Set the block background color.
Upload Icon	Upload an image to be the block background image.
Aspect Ratio	Select the background image display. No Zoom: Displays the image as it is. Subject to Width: Stretches the image in equal proportion with the same width as the block. Subject to Height: Stretches the image in equal proportion with the same height as the block. Covered with: The background image covers the whole block.

• Grid property
  You can set rows and columns of the grid, and set the width of each column.

• Property of grid inside a block or a grid
  You can set the padding, background color and image of the grid, and background image display and elements alignment inside the grid.